
import './StudentConditionPage.scss'
import { useEffect, useState } from 'react';
import { localGetTestListAPI,localGetLearnConditionAPI } from '@/apis/student';
import StudentConditionShow from './components/StudentConditionShow/StudentConditionShow';
import { useDispatch,useSelector } from 'react-redux';
import { fetchGetLearnCondition,fetchGetTestList } from '@/store/modules/student';

function StudentConditionPage() {
    const [testData,setTestData] = useState([]);
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const { testList, learnCondition } = useSelector(state => state.student);
    const [advice, setAdvice] = useState({});

    useEffect(()=>{
        async function getTestData(){
            async function getTestList(){
                if(testList.length === 0)
                dispatch(fetchGetTestList(user_status.class_id,user_status.token));
            }
    
            getTestList();
        }

        async function getAdvice(){
            await dispatch(fetchGetLearnCondition(user_status.class_id,user_status.token));
            setAdvice(learnCondition);
        }

        getTestData();
        getAdvice();
    },[])

    useEffect(()=>{
        console.log(learnCondition);
        console.log(Object.keys(learnCondition).length);
    },[learnCondition])

    return (
        <div className="StudentConditionPage">
            <h1>学习情况</h1>
            <section className='learn-condition'>
                <ul>
                    {testList.map((ele,index) => 
                        <li key={index}>
                            <span>第{ele.test_name}章测验</span>
                            <span>{`(总分：${ele.test_total_score})`}</span>
                            <span>
                                {ele.if_test_finish?`得分：${ele.test_got_score}`:`尚未完成`}
                            </span>
                        </li>
                    )}
                </ul>
                <StudentConditionShow testData={testList}/>
            </section>
            <h1>规划建议</h1>
            {
                Object.keys(learnCondition).length !== 0 &&
                <section className='advice'>
                    <h2>课程短板</h2>
                    <p className='short-comings'>{learnCondition.short_comings}</p>
                    <br />
                    <h2>学习建议</h2>
                    <p className='imporve-advice'>{learnCondition.improve_advice}</p>
                    <br />
                    <h2>路线建议</h2>
                    <p className='rote'>{learnCondition.study_rote}</p>
                </section>
            }
        </div>
    )
}

export default StudentConditionPage;